<template>
  <div>
    <div class="bookmall">
      <!-- 顶部功能栏 -->
      <div class="topbar">
        <span is-link @click="tip" class="item">
          <i class="iconfont icon-liebiao"></i>
        </span>
        <span class="item">书城</span>
        <router-link to="/search" tag="span" class="item seach">
          <i class="iconfont icon-sousuo1"></i>
        </router-link>
      </div>

      <!-- 内容区域 -->
      <div class="classify">
        <van-tabs swipeable>
          <van-tab title="精选">
            <!-- 引入热门精选组件 -->
            <hots />
          </van-tab>
          <van-tab title="分类">
            <!-- 引入分类组件 -->
            <classification />
          </van-tab>
          <van-tab title="榜单">
            <!-- 引入榜单组件 -->
            <ranking />
          </van-tab>
          <!-- <van-tab title="书单"> 书单界面 </van-tab> -->
        </van-tabs>
      </div>

      <!-- 底部导航 -->
      <footernav />
    </div>
  </div>
</template>

<script>
// Toast 是哪里需要就在哪里引入的
import { Toast } from "vant";
// 引入组件
import footernav from "../components/base/footernav.vue";
import classification from "../components/bookmall/classification.vue";
import hots from "../components/bookmall/hots.vue";
import ranking from "../components/bookmall/ranking.vue";
export default {
  name:"bookmall",
  data() {
    return {
    };
  },
  methods: {
    // 更改男女频道
    tip() {
        Toast("你别点我了，我只是用来占位置的");
      }
  },
  components: {
    footernav,
    hots,
    classification,
    ranking,
  },
};
</script>

<style lang='less'>
.bookmall {
  display: flex;
  flex-direction: column;
  padding: 40px 0px 50px 0px;

  .topbar {
    max-width: 750px;
    min-width: 320px;
    margin: 0 auto;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #52b594;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1;
    .item {
      color: #fff;
      font-weight: 550;
      i {
        font-size: 20px;
        font-weight: normal;
      }
    }
    .seach {
      display: flex;
      justify-content: flex-end;
    }
    .type {
      span {
        font-size: 14px;
        font-weight: normal;
        i {
          font-size: 12px;
          transform: scale(0.83333);
          margin-left: 6px;
        }
      }
    }
  }

  // 分类
  .classify { 
    .van-tabs__wrap {
      height: 36px;
    }
    .van-tab__text {
      font-size: 14px;
    }
    // 选中的颜色
    .van-tab--active {
      color: #52b594;
      font-weight: bold;
    }
    // 线的颜色
    .van-tabs__line {
      background-color: #52b594;
    }
  }
}
</style>